<template>
  <view class="others_bill_box" @click="emit('onClick')">
       <!-- 标题 -->
    <binary-layout>
      <template #left>
        <view class="title">
          {{ props.data.billMsg }}
        </view>
      </template>
      <template #right>
        <view class="state">
          {{ getEnumValue(props.data.billState) }}
        </view>
      </template>
    </binary-layout>

    <!--支付时间 -->
    <view class="cycle" v-if="props.data.billPayTime">
      <binary-layout :middle-text="props.data.billPayTime.toString()">
        <template #left>
          <view class="item">支付时间</view>
        </template>
      </binary-layout>
    </view>


    <!-- 账单金额 -->
    <view class="fees">
      <binary-layout>
        <template #left>
          <view class="item">账单金额</view>
        </template>
        <template #middle>
          <view class="price">￥{{ format.priceHandler(props.data.billPrice) }}</view>
        </template>
        <template #right>
          <view
            class="stateBth"
            v-if="checkStateEnum(props.data.billState, BillSateEnum.WAIN_PAID)"
            >{{ getEnumValue(props.data.billState) }}</view
          >
        </template>
      </binary-layout>
    </view>
  </view>
</template>

<script lang="ts" setup>
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type { PageBill } from '@/config/data/data'
import type { PropType } from 'vue'
import { BillSateEnum, checkStateEnum, getEnumValue } from '@/config/enum/enum'
import format from '@/util/format'
//自定义事件
const emit =defineEmits<{
  /**
   * 点击事件
   */
  (e:"onClick"):void
}>()

//接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageBill>,
    default: {},
  },
})
</script>

<style scoped lang="scss">
.others_bill_box {
  margin-bottom: 50rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  width: calc(100% - 40rpx);

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item {
    font-size: 28rpx;
    width: 140rpx;
  }
  .state {
    width: 140rpx;
    text-align: right;
    color: #fbb719;
  }

  .price {
    color: #fbb719;
    font-weight: 600;
  }

  .stateBth {
    padding: 8rpx 14rpx;
    border-radius: 10rpx;
    color: #fff;
    background-color: #fbb719;
  }

  .cycle {
    padding: 8rpx 18rpx;
    letter-spacing: 0;
    background-color: #fbda8d22;
    border-radius: 10rpx;
  }
  .fees {
    padding: 8rpx 18rpx;
  }
}
</style>
